<template>
    <div>
        <ul class="sceneryList">
            <li v-for ="scenery in list">
                <img v-bind:src="scenery.img">
                <p>{{scenery.sceneryName}}</p>
            </li>
        </ul>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    name:"show",
    data(){
        var obj = this;
        // console.log(this)
        var url = "";
        if(obj.sceneryId == 1){
            url="json/fj1.json"
        }else if (obj.sceneryId == 2){
            url = "json/fj2.json"
        }
        axios.get(url).then((res)=>{
            obj.list=res.data;
        })
        return{
            list:[]
        }
    },
    props:{
        sceneryId:Number
    },
    watch:{
        sceneryId(){
            var obj = this;
            var url = "";
            if(obj.sceneryId == 1){
                url="json/fj1.json"
            }else if (obj.sceneryId == 2){
                url = "json/fj2.json"
            }
            axios.get(url).then((res)=>{
                obj.list=res.data;
            })
            return{
                list:[]
            }
        }
    }
}
</script>
<style>
    .sceneryList li{
        width: 200px;
        height: 200px;
        list-style: none;
        float: left;
        font-size: 20px;
        margin: 5px;
        color: red;
    }
    .sceneryList img{
        width: 200px;
        height: 200px;
    }
</style>